$iconfont-path: '../icons/fonts/';
$iconfont-name: "icomoon";

$icons: (
        chevron-left: "\e687",
        chevron-right: "\e688",
);

@import "fonts";















*{
  margin:0;
  padding:0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #2e2e2e;
  font-size: 12px;
  font-family: Tahoma,sans-serif,Arial;

  @media screen and (min-width: 240px) {
    font-size: 9.6px;
  }
  @media screen and (min-width: 320px) {
  }
  @media screen and (min-width: 480px) {
    font-size: 11.273px;
  }
  @media screen and (min-width: 768px) {
    font-size: 12px;
  }
  @media screen and (min-width: 1024px) {
  }
  @media screen and (min-width: 1280px) {
    font-size: 12.4px;
  }
  @media screen and (min-width: 1440px) {
    font-size: 13.1px;
  }
  @media screen and (min-width: 1920px) {
    font-size: 14.18px;
  }
}

body {
  @include backface-visibility(hidden);
}

form {
  margin: 0;
  padding: 0;
}

a:link, a:visited, a:hover {
  text-decoration: none;
}

ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}














$click-area-height: 3.2rem;
$m-click-area-height: 5rem;

$click-area-fontsize: 1.3rem;
$m-click-area-fontsize: 1.32rem;

$click-area-color: #525252;
$m-click-area-color: #777777;

@import "month-picker";



.month-picker {
  >.box {
    cursor: pointer;

    @media screen and (max-width: 767px) {
      box-sizing: border-box;
      line-height: $m-click-area-height;
      font-size: $m-click-area-fontsize;
      color: $m-click-area-color;
      text-align: right;
    }

    @media screen and (min-width: 768px) {
      border: 1px solid #e0e0e0;
      background-color: #f6f6f6;
      padding-left: 0.9rem;
      box-sizing: border-box;
      line-height: $click-area-height;
      font-size: $click-area-fontsize;
      color: $click-area-color;

      >label {
        font-size: $click-area-fontsize;
        color: #525252;
      }
    }
  } //>.box

  $pad-head-height: 3.4rem;
  $pad-icon-size: 1.8rem;

  .tab.btn {
    font-size: 0; //make content invisible

    @include icon(before, $size: $pad-icon-size) {
      line-height: $pad-head-height;
      text-align: center;
      width: $pad-head-height;
    }

    &.prev:before {
      @include icon-content(chevron-left);
    }
    &.next:before {
      @include icon-content(chevron-right);
    }
  }
}












.list-area {
  margin-top: 5rem;

  @media screen and (max-width: 767px) {
  }

  @media screen and (min-width: 768px) {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  >ul {
    @media screen and (max-width: 767px) {
      border-bottom: 1px solid #e8e8e8;

      $item-fontsize: $m-click-area-fontsize;
      $item-height: $m-click-area-height;
      $content-hmargin: 1.6rem;

      >li {
        position: relative;
        background-color: #fff;
        border-top: 1px solid #e8e8e8;
        padding: 0 $content-hmargin;

        &:after {
          content: ' ';
          clear: both;
          display: table; //key for clear
        }

        >label {
          //position: absolute;
          //top: 0;
          //left: $content-hmargin;
          float: left;
          display: block;
          line-height: $item-height;
          //width: 9rem;
          color: #440f24;
          font-size: 1.12rem;

          b {
            font-size: 1.1em;
          }
          span {
            position: absolute;
            display: block;
            font-size: 0.8rem;
            color: #bfbfbf;
            left: $content-hmargin;
            top: 1.5em;
          }
        }
        .edit {
          margin-left: 9rem;
          line-height: $item-height;
        }

      } //li
    }

    @media screen and (min-width: 768px) {
      padding: 1.8rem;;

      $item-fontsize: $click-area-fontsize;
      $item-height: $click-area-height;

      >li {
        padding: 0.5rem 0 1.4rem;
        font-size: $item-fontsize;

        &:after {
          content: ' ';
          clear: both;
          display: table; //key for clear
        }


        >label {
          //float: left;
          display: block;
          //width: 8rem;
          margin-right: 1rem;
          padding: 1px;
          color: #898989;
          //line-height: $item-height;
          font-size: 1.1rem;
          margin-bottom: 0.5em;

          b {
            display: block;
            font-size: 1.1em;
          }
          span {
            display: block;
            font-size: 0.9em;
            color: #afafaf;
            margin-top: 0.4em;
          }
        }
        .edit {
          //overflow: hidden;
          //margin-left: 9rem;
          padding: 1px;
          height: $item-height + 0.1rem;
        }

      } //li
    }
  } //ul
}